<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩色导航条练习</title>

    <style>
        a {
            /* display: inline-block：将块行内元素转位行内块元素 */
            display: inline-block;
            width: 120px;
            height: 58px;
            /* text-decoration: none：文字装饰，none为去掉下划线 */
            text-decoration: none;
            background-color: aqua;
            /* line-height: 48px：行高48=上边距+文字高度+下边距 */
            line-height: 48px;
            /*  text-align: center： 文字排列 center居中 */
            text-align: center;
            color: #fff;
        }

        .d1 {
            background-image: url(../images/1.png);
        }

        .d1:hover {
            background-image: url(../images/11.png);
        }

        .d2 {
            background-image: url(../images/2.png);
        }

        .d2:hover {
            background-image: url(../images/22.png);
        }

        .d3 {
            background-image: url(../images/3.png);
        }

        .d3:hover {
            background-image: url(../images/33.png);
        }

        .d4 {
            background-image: url(../images/4.png);
        }

        .d4:hover {
            background-image: url(../images/44.png);
        }
    </style>

</head>

<body>
    <a href="#" class="d1">五彩导航</a>
    <a href="#" class="d2">五彩导航</a>
    <a href="#" class="d3">五彩导航</a>
    <a href="#" class="d4">五彩导航</a>
</body>

</html>